<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>服务管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区 -->
      <el-form ref="searchFormRef" :inline="true" :model="queryInfo.query" size="mini">
        <!-- 发放时间 -->
        <el-form-item style="width: 400px">
          <el-col :span="7">
            <el-select
              v-model="queryInfo.query.time_type"
              placeholder="请选择"
              size="mini"
            >
              <el-option label="发放时间" value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="queryInfo.query.start_time"
              size="mini"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="text-align: center;">-</el-col>
          <el-col :span="8">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="queryInfo.query.end_time"
              size="mini"
              style="width: 100%"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <!-- 项目名称 -->
        <el-form-item label="项目名称" prop="project_id">
          <el-select
            v-model="queryInfo.query.project_id"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="item in selectData.get_project"
              :key="item.id"
              :label="item.name + '【' + item.id + '】'"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 礼包名称 -->
        <el-form-item label="礼包名称【ID】" prop="gift_id">
          <el-select v-model="queryInfo.query.gift_id" filterable size="mini">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.gift" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 服务名称 -->
        <el-form-item label="服务名称【ID】" prop="service_id">
          <el-select v-model="queryInfo.query.service_id" filterable size="mini">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.get_service" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 发放人 -->
        <el-form-item label="发放人" prop="send_user">
          <el-select v-model="queryInfo.query.send_user" filterable size="mini">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.user" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 关键字 -->
       <el-form-item label="关键字" prop="key_words">
         <el-input
           v-model="queryInfo.query.key_words"
           placeholder="请输入券号、服务卡号、手机号或流水号"
         ></el-input>
       </el-form-item>
        <el-form-item>
          <el-button class="theme-background-color" size="mini" @click="searchList">搜索</el-button>
          <el-button size="mini" @click="resetSearchForm">重置 </el-button>
        </el-form-item>
      </el-form>

      <!-- 操作区域 -->
      <div>
        <!-- 导出数据 -->
      <el-button icon="el-icon-download" size="mini" :loading="btnLoading" @click="downloadExcel">
          导出数据
        </el-button>
      </div>

      <!-- 列表区域 -->
      <el-table :data="list" border stripe>
        <!-- <el-table-column label="序号" type="index"></el-table-column> -->
        <el-table-column label="券号|服务卡号" min-width="200px" max-width="400px" align="center" prop="code">
        </el-table-column>
        <el-table-column label="服务名称【ID】" min-width="200px" max-width="400px" align="center" prop='servcie_name'>
        </el-table-column>
        <el-table-column label="券【ID】|服务卡【ID】" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope">
            {{ scope.row.config_name }}【{{ scope.row.config_id }}】
          </template>
        </el-table-column>
        <el-table-column label="手机号码" min-width="200px" max-width="400px" align="center" prop='phone'>
        </el-table-column>
        <el-table-column label="礼包名称【ID】" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope">
            {{ scope.row.gift_name }}【{{ scope.row.gift_id }}】
          </template>
        </el-table-column>
        <el-table-column label="归属机构" min-width="200px" max-width="400px" align="center" prop="org_name">
        </el-table-column>
        <el-table-column label="归属项目" min-width="200px" max-width="400px" align="center">
          <template slot-scope="scope">
            {{ scope.row.project_name }}【{{ scope.row.project_id }}】
          </template>
        </el-table-column>
        <el-table-column label="发放流水号" min-width="200px" max-width="400px" align="center" prop="serial_num"></el-table-column>
        <el-table-column label="发放人" min-width="200px" max-width="400px" align="center" prop="creator_name"></el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        queryInfo: {
          query: {
            time_type: '1',
            start_time: '',
            end_time: '',
            project_id: '',
            gift_id: '',
            service_id: '',
            send_user: '',
            key_words: ''
          },
          pagenum: 1,
          pagesize: 20
        },
        list: [],
        total: 0,
        // 搜索条件
        selectData: [],
        btnLoading: false
      }
    },
    created() {
      this.initTime()
      this.getSelectData()
      this.getListData()
    },
    methods: {
      // 初始化日期
      initTime() {
        const endDate = this.getFormatDate(new Date()).substr(0, 11)
        const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 29)).substr(0, 11)
        this.queryInfo.query.start_time = beginDate
        this.queryInfo.query.end_time = endDate
      },
      async getSelectData() {
        const url = 'admin/Data/find'
        const { data: res } = await this.$http.post(url, { code: 'get_project,gift,get_service,user' })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData = res.data
      },

      searchList() {
        this.queryInfo.pagenum = 1
        this.getListData()
      },
      resetSearchForm() {
        this.initTime()
        this.$refs.searchFormRef.resetFields()
        this.getListData()
      },
      // 表格数据
      async getListData() {
        // 返回数据重命名为res
        const {
          data: res
        } = await this.$http.post('/admin/ServiceSystem/serviceRecord', this.queryInfo)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.list = res.data.list
        this.total = res.data.total
      },
      async downloadExcel() {
        this.btnLoading = true
        this.$http({
            method: 'post',
            url: '/admin/ServiceSystem/downloadServiceRecord',
            data: this.queryInfo,
            headers: {
              token: window.sessionStorage.getItem('token')
            },
            responseType: 'blob'
          })
          .then((res) => {
            this.btnLoading = false
            if (res.data.type) {
              // 文件下载
              const blob = new Blob([res.data], {
                type: 'application/vnd.ms-excel'
              })
              let link = document.createElement('a')
              link.href = URL.createObjectURL(blob)
              link.setAttribute('download', '优惠券配置数据.xlsx')
              link.click()
              link = null
              this.$message.success('导出成功')
            } else {
              // 返回json
              this.$message.warning(res.data.msg)
            }
          })
          .catch((err) => {
            this.btnLoading = false
            console.log(err)
            this.$message.error('下载失败')
          })
      },
      // 监听 pagesize 改变的事件
      handleSizeChange(newSize) {
        console.log(newSize)
        this.queryInfo.pagesize = newSize
        this.getListData()
      },
      // 监听 页码值 改变的事件
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.getListData()
      }
    }
  }
</script>
